<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各科室工作量实时显示</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item>
                <div class="block">
                    <span class="demonstration">日期</span>
                    <el-date-picker
                            v-model="queryForm.attendanceDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="科室">
                <el-input v-model="queryForm.administrativeName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="administrativeName"
                    label="科室">
            </el-table-column>
            <el-table-column
                    prop="checkedCount"
                    label="已诊人数">
            </el-table-column>
            <el-table-column
                    prop="waitCheckCount"
                    label="候诊人数">
            </el-table-column>
            <el-table-column
                    prop="administrativeWorkloadAccountDate"
                    label="日期">
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
                background
                layout="prev, pager, next" :current-page="current"
                :page-count="totalPage" :size="size" @current-change="changePage">
        </el-pagination>
    </div>
    <script>
        function curentTime() {
            var now = new Date();
            var year = now.getFullYear();       //年
            var month = now.getMonth() + 1;     //月
            var day = now.getDate();            //日
            var hh = "00";            //时
            var mm = "00";          //分
            var ss = "00";          //分
            var clock = year + "-";
            if(month < 10)
                clock += "0";
            clock += month + "-";
            if(day < 10)
                clock += "0";
            clock += day + " ";
            clock +=hh+":"+mm+":"+ss;
            return clock;
        }
        setInterval("curentTime()",1000*30);
        var app=new Vue({
            el:"#app",
            data:{
                tableData:[],
                totalPage:0,
                current:1,
                size:10,
                queryForm:{
                    attendanceDate:"",
                    administrativeName:"",
                },
            },
            mounted:function () {
                this.queryMessageInfo();
            },
            created: function () {//这里是定时器
                // setInterval(this.queryMessageInfo, 1000*10);
            },
            methods:{
                queryMessageInfo:function () {
                    var date=curentTime();
                    if(this.queryForm.attendanceDate==""){
                        this.queryForm.attendanceDate=[date,date];
                    }
                    var vm=this;
                    var params={"pageSize":this.size,attendanceDateBefore:this.queryForm.attendanceDate[0],attendanceDateAfter:this.queryForm.attendanceDate[1]};
                    axios.get("/medical/administrative-workload-account/pageQuery",{params:params}).then(function (resp) {
                        console.log(resp);
                        vm.tableData=resp.data.content;
                        vm.totalPage=resp.data.totalPage;
                    })
                },
                changePage:function (curr) {
                    var date=curentTime();
                    if(this.queryForm.attendanceDate==""){
                        this.queryForm.attendanceDate=[date,date];
                    }
                    var vm=this;
                    var params={administrativeName:this.queryForm.administrativeName,attendanceDateBefore:this.queryForm.attendanceDate[0],attendanceDateAfter:this.queryForm.attendanceDate[1],pageIndex:curr,pageSize:this.size};
                    axios.get("/medical/administrative-workload-account/pageQuery",{params:params}).then(function (resp) {
                        vm.tableData=resp.data.content;
                        vm.totalPage=resp.data.totalPage;
                        vm.current=resp.data.pageIdx;
                    })
                },
                onQuery:function () {
                    var date=curentTime();
                    if(this.queryForm.attendanceDate==""){
                        this.queryForm.attendanceDate=[date,date];
                    }
                    var vm=this;
                    var params={administrativeName:this.queryForm.administrativeName,attendanceDateBefore:this.queryForm.attendanceDate[0],attendanceDateAfter:this.queryForm.attendanceDate[1],pageSize:this.size};
                    axios.get("/medical/administrative-workload-account/pageQuery",{params:params}).then(function (resp) {
                        vm.tableData=resp.data.content;
                        vm.totalPage=resp.data.totalPage;
                        vm.current=resp.data.pageIdx;
                    })
                }
            }
        })
    </script>
</body>
</html>